<template>
	<view class="distribution">
		<view class="title u-flex-between" @click="$navigateTo('/subPackages/distribution/index')">
			<view class="title-left">分销中心</view>
			<view class="title-right u-flex">
				<!-- <view class="title-all">全部</view> -->
				<u-icon name="arrow-right" color="#CDCDCD" size="12"></u-icon>
			</view>
		</view>
		<view class="distribution-content u-flex">
			<view class="li" @click="$navigateTo('/subPackages/distribution/index')">
				<view class="li-number">￥{{isLogin?userInfo.commission:'0.00'}}</view>
				<view class="li-text">佣金</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/distribution/subordinate-list')">
				<image :src="$getImageUrl('/user_client/static/icons/tdgl.svg')" mode="aspectFit" class="li-images"></image>
				<view class="li-text">我的团队</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/distribution/invitation')">
				<image :src="$getImageUrl('/user_client/static/icons/yq.png')" mode="aspectFit" class="li-image"></image>
				<view class="li-text">分享码</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/distribution/commission-bill')">
				<image :src="$getImageUrl('/user_client/static/icons/fenxiao.svg')" mode="aspectFit" class="li-image"></image>
				<view class="li-text">分销账单</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/distribution/explain')">
				<image :src="$getImageUrl('/user_client/static/icons/rule.svg')"  mode="aspectFit" class="li-images"></image>
				<view class="li-text">分销说明</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "distribution",
		data() {
			return {};
		},
		// 此处定义传入的参数
		props: {},
		computed: {
			// 获取用户数据
			...mapState('user', ['userInfo', 'isLogin'])
		},
		mounted() {},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	.distribution {
		width: 100%;
		margin-top: 25rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		// box-shadow: 0rpx 10rpx 15rpx 0rpx #f9f9f9;

		.title {
			font-size: 26rpx;
			line-height: 1;

			.title-left {
				color: #020202;
			}

			.title-right {
				font-size: 24rpx;
				color: #686868;
			}
		}

		.distribution-content {
			padding-top: 30rpx;

			.li {
				width: 20%;

				.li-number {
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: bold;
				}

				.li-image {
					width: 34rpx;
					height: 34rpx;
					display: block;
					margin: 0 auto;
				}

				.li-images {
					width: 36rpx;
					height: 36rpx;
					display: block;
					margin: 0 auto;
				}

				.li-text {
					padding-top: 15rpx;
					line-height: 1;
					font-size: 22rpx;
					color: #020202;
					text-align: center;
				}
			}
		}
	}
</style>